<template>
  <div class="custom-list-fields">
    <div class="table-content">
      <vxe-table border ref="fieldTableRef" show-overflow height="100%" :row-config="{ isHover: true, keyField: 'id', useKey: true }" :data="puppeteer" :scroll-y="{ enabled: true, gt: 100 }">
        <vxe-column type="seq" title="列顺序" width="70"></vxe-column>
        <vxe-column field="title" title="字段中文名">
          <template #default="{ row }">
            {{ row.type === "checkbox" ? "复选框" : row.title }}
          </template>
        </vxe-column>
        <vxe-column type="checkbox" title="是否显示" width="100"></vxe-column>
        <vxe-column field="action" title="操作" width="160" align="center">
          <template #default="{ row }">
            <!-- <span v-if="row.fixed" class="fixed-column">
              {{ row.fixed === "left" ? "左固定" : "右固定" }}
            </span> -->
            <span :class="{ 'fixed-column': row.type === 'checkbox', 'select-fixed': true }">
              <a-select v-model:value="row.fixed" :disabled="row.type === 'checkbox'" allowClear placeholder="请选择">
                <a-select-option label="左固定" value="left">左固定</a-select-option>
                <a-select-option label="右固定" value="right">右固定</a-select-option>
              </a-select>
            </span>
            <span v-if="!row.fixed" :class="['operation-icon', row.fixed ? 'fixed-column' : '']">
              <vertical-align-middle-outlined />
            </span>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <div class="operation-btn-wrapper">
      <a-button type="primary" :loading="loading" @click="submitHandle">确 认</a-button>
      <a-button @click="cancelHandle">取 消</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { VerticalAlignMiddleOutlined } from "@ant-design/icons-vue";
import { onMounted, toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: Array<SuperTable.TableCoulmnItem | SuperTable.NestTableColumnItem>;
    activeKey: string;
  }>(),
  {}
);
const { passData, visible, activeKey } = toRefs(props);
const emit = defineEmits<{
  (e: "submit", passData: Array<SuperTable.TableCoulmnItem | SuperTable.NestTableColumnItem>): void;
  (e: "update:visible", visible: boolean): void;
}>();
const { fieldTableRef, init, puppeteer, loading, allLeftFixedCount, allRightFixedCount } = InitHook({ passData });
const { submitHandle, cancelHandle } = OperationHook({ emit, puppeteer, fieldTableRef, activeKey, loading, allLeftFixedCount, allRightFixedCount });
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    }
  }
);
onMounted(() => {
  init();
});
</script>
<style lang="stylus" scoped>
.custom-list-fields{
    background-color: #fff;
    padding: 12px 12px 12px 12px;
    height: 100%;
    height: calc(100% - 50px);
    .table-content{
        height: 100%;
    }
    .operation-btn-wrapper{
      position: absolute;
      background-color: #fff;
      bottom: 0;
      left: 0;
      padding: 12px;
      width: 100%;
      font-weight: 600;
      text-align: center;
      z-index: 999;
      box-shadow: 0px 0px 5px #ccc;
      display: flex;
      justify-content: space-around;
      :deep(.ant-btn){
        width: 48%;
      }
    }
    .operation-icon{
      font-size: 18px;
      cursor: pointer;
    }
    .fixed-column{
      cursor: not-allowed;
      color: #0045a3;
      font-weight: 600;
    }
    .select-fixed{
      margin-right: 16px;
    }
}
</style>
<style lang="stylus">
.sortable-ghost{
  background-color: #40a9ff !important;
}
</style>
